<template>
	
	<view class="login">
		<uni-popup ref="popup" type="message">
		    <uni-popup-message :type="msgType" :message="msgMsg" :duration="2000"></uni-popup-message>
		</uni-popup>
		<view class="login_form">
		
		        <uni-forms :modelValue="formData" ref="form" :rules="formRules">
		            <uni-forms-item name="username" >
		               <input type="text" placeholder="请输入用户名" v-model="formData.username" @input="binddata('username',$event.detail.value)"/>
		            </uni-forms-item>
		            <uni-forms-item  name="password"> 
						<input type="password" placeholder="请输入密码" v-model="formData.password" @input="binddata('password',$event.detail.value)" />
		            </uni-forms-item> 
					
		        </uni-forms>
				
				<button @click="submitForm">
				<uni-icons type="arrow-right" size="30" color="#ffffff" style="position: relative; bottom: 6upx;"></uni-icons>
				<!-- <image src="../../static/login_iconleft.png" mode="aspectFit"></image> -->
				</button>
		       
		 </view>

		 <view class="login_footer">
		 	<span><navigator url="/pages/password/password">找回密码</navigator></span>|
		 	<span><navigator url="/pages/register/register">新用户注册</navigator></span>
		 	
		 </view>
	</view>
</template>

<script>
	export default {
		// onShow() {
		// 	console.log("显示登录页")
		// 	var token = uni.getStorageSync('token')
		// 	console.log(token)
		// 	if (token){
		// 		this.Myrequest('user/','POST').then((res)=>{console.log(res)})
		// 		uni.switchTab({
		// 				url:"/pages/user/user",
		// 				success(res) {
		// 				},
		// 				fail(res) {
		// 					uni.showToast({
		// 						title:"请求失败,请检查网络",
		// 						icon:"none",
		// 					})
		// 					console.log("跳转失败")
		// 				},
		// 		})
		// 	}
				
				
		// },
		data() {
			return {
				msgType:'success',
				msgMsg:"数据获取成功",
				formData:{
					username:"",
					password:"",
				},
				 formRules: {
				                // 对name字段进行必填验证
				                username: {
				                    rules: [{
				                            required: true,
				                            errorMessage: '请输入姓名',
				                        },
				                        {
				                            minLength: 3,
				                            maxLength: 10,
				                            errorMessage: '姓名长度在 {minLength} 到 {maxLength} 个字符',
				                        }
				                    ]
				                },
				                // 对email字段进行必填验证
				                password: {
				                    rules: [{
										required:true,
				                        errorMessage: '请输入密码',
				                    }]
				                }
				            }
			}
		},
		methods: {
			openMsg(type,msg){
				this.msgType = type
				this.msgMsg = msg
				this.$refs.popup.open()
			},
			submitForm(){
			this.$refs.form.validate().then(res=>{
			                console.log('表单成功信息', res);
							console.log(this.$store.state.base_ip)
							this.Myrequest('authorization/',"POST",{"username":res.username,"password":res.password}).then(
								async backData=>{
									console.log(backData)
								if(backData.code === undefined){
								this.openMsg('error','用户名或密码错误')
									return
								}
								if(backData.code !== 400){
									console.log(backData.data)
									var that= this
									// 保存token 
									uni.setStorage({
										key:"jwt",
										data:backData.token
									})
									//保存用户信息到vuex
									this.$store.commit('get_userdata',backData)
									console.log(this.$store.state.userdata)
									// 同步用户信息到缓存中 setlocalstorge
									uni.setStorageSync('token',backData.token)
									uni.setStorageSync('userdata',backData)
									uni.switchTab({
									url:"/pages/index/index",
									success(res) {	
										console.log(res)
									},
									fail(res) {
										uni.showToast({
											title:"请求失败,请检查网络",
											icon:"none",
										})
										console.log("跳转失败")
									},
							})}
							})
							.catch((err)=>{
								console.log(err)
							})
							
			            }).catch(err =>{
			                console.log('表单错误信息：', err);
			            })
		}
		}
	}
</script>

<style scss scoped>
	.login {
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-content: center;
		position: relative;	
	}
	.login_form {
		position: absolute;
		top: 158upx;
	}
	input {
		width: 522upx;
		height: 100upx;
		border-radius: 100upx;
		padding-left: 40upx;
		font-size: 30upx;
		background-color: #f2f3f7;	
	}
	button {
		margin-top: 100upx;
		width: 150upx;
		height: 150upx;
		border-radius: 200upx;
		background-image: linear-gradient(#22b1fd,#00cafc);
		text-align: center;
	}
	
	image {
		width: 100%;
		height: 100%;
		color: #FFFFFF;
		
	}
	.t-icon{
		color: #FFFFFF;
	}
	.t-icon-youjiantou {
		z-index: 999;
		font-size: 60upx;
		position: relative;
		left: -15upx;
		top:42upx;
		

	}
		
	.login_footer {
		
		position: absolute;
		bottom: 80upx;
		font-size: 30upx;
		
		}
		span {
			margin: 0 32upx;
			display: inline-block;
		}
</style>
